<script setup lang="ts">
import { computed, defineAsyncComponent, defineEmits, toRef } from 'vue'
import { Plus, CollectionTag, FolderAdd } from '@element-plus/icons-vue'
import { v4 as uuidv4 } from 'uuid'
import { useQuestionStore } from '@/stores/question'
import type { QuestionSetting } from '@/stores/question'

// const questionStore = useQuestionStore()
const props = defineProps<{
  data: any
  index?: string | Number
  isEdit?: boolean
}>()
const emit = defineEmits(['save', 'delete', 'copy'])

const formSetting = computed(() => {
  return props.data.setting || {}
})

const compName = `${props.data.type.charAt(0).toUpperCase()}${props.data.type.slice(1)}`
const Comp = defineAsyncComponent(() => import(`./question/${compName}.vue`))

const handleCopy = () => {
  emit('copy', props.data.id)
}
const handleDelete = () => {
  emit('delete', props.data.id)
}
const onAdd = (option: any) => {
  props.data.data.push(option)
}
const handleAdd = () => {
  let index = 1
  const arr: number[] = []
  props.data.data.forEach((element: any) => {
    const _i = element.label.replace('选项', '')
    arr.push(parseInt(_i))
  })
  while (arr.find((i) => i === index)) {
    index++
  }
  const option = {
    label: `选项${index}`,
    value: uuidv4()
  }
  onAdd(option)
}
const handleAddOther = () => {
  const option = {
    label: `其他项`,
    value: uuidv4()
  }
  onAdd(option)
}
const handleAddBatch = () => {}
</script>

<template>
  <div class="question">
    <span class="required">{{ formSetting.isRequired ? '*' : '' }}</span>
    <span class="index" v-if="formSetting.showIndex">{{ index }}</span>
    <component class="question-content" :is="Comp" :data="data" :isEdit="isEdit" />
    <div class="action-bar">
      <el-tooltip content="拖动排序" placement="top" effect="light">
        <el-icon class="action drag-handle"><Rank /></el-icon>
      </el-tooltip>
      <el-tooltip content="逻辑设置" placement="top" effect="light">
        <el-icon class="action"><Cpu /></el-icon>
      </el-tooltip>
      <el-tooltip content="复制" placement="top" effect="light">
        <el-icon class="action" @click="handleCopy"><CopyDocument /></el-icon>
      </el-tooltip>
      <el-tooltip content="删除" placement="top" effect="light">
        <el-icon class="action" @click="handleDelete"><Delete /></el-icon>
      </el-tooltip>
    </div>
    <div class="option-action-bar">
      <el-button text type="primary" :icon="Plus" @click="handleAdd">添加选项</el-button>
      <el-button text type="primary" :icon="CollectionTag" @click="handleAddOther"
        >添加其他项</el-button
      >
      <el-button text type="primary" :icon="FolderAdd" @click="handleAddBatch"
        >批量添加选项</el-button
      >
    </div>
  </div>
</template>

<style lang="scss" scoped>
.question {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin: 16px 0;
  padding: 18px 40px 30px 30px;
  border: 1px solid transparent;
  overflow: hidden;
  background-color: #fff;
  &.active {
    border: 1px solid #409eff;
  }
  .index {
    margin-right: 4px;
    line-height: 32px;
    vertical-align: middle;
  }
  .required {
    vertical-align: middle;
    color: #f56c6c;
    margin-right: 4px;
    display: inline-block;
    width: 12px;
  }
  .question-content {
    flex: 1;
  }
  :deep(.question-title) {
    margin-bottom: 12px;
  }
  .action-bar {
    position: absolute;
    top: 16px;
    right: 16px;
    visibility: hidden;
    .action {
      cursor: pointer;
      margin-right: 8px;
      font-size: 16px;
    }
  }
  &.active {
    .action-bar,
    .option-action-bar {
      visibility: visible;
    }
  }
  &:hover {
    .action-bar {
      visibility: visible;
    }
  }
  .option-action-bar {
    position: absolute;
    bottom: 12px;
    left: 32px;
    visibility: hidden;
    white-space: nowrap;
  }
}
</style>
